<template>
  <!-- 搜索部分 -->
  <el-row class="search-row" justify="start" ref="searchRef" style="position: relative;">
    <el-col :span="20">
      <el-row :gutter="15" ref="childRow" style="align-items: center;">
        <transition-group name="el-fade-in-linear">
          <slot></slot>
        </transition-group>
        <el-button type="primary" @click="searchKey"
          v-show="props.showSearchBtn && ((childCount < 4 && !store.hasLeftSide) || (childCount <= 4 && store.hasLeftSide && screenWidth >= 1920) || (childCount <= 4 && !store.hasLeftSide))">
          查询
        </el-button>
      </el-row>
    </el-col>
    <el-col :span="4" class="col-btn-box"
      :style="props.showMore || props.showClear || childCount >= 4 ? ' margin: 7.5px 0 0;' : ''">
      <!-- <div class="" @click="showConfirm">
          更多查询
        </div> -->
      <el-row>
        <el-col :span="12">
          <el-button type="primary"
            v-if="props.showSearchBtn && (childCount >= 5 || (childCount > 4 && !store.hasLeftSide && screenWidth < 1920) || (childCount >= 4 && store.hasLeftSide && screenWidth < 1920))"
            @click="searchKey">
            查询
          </el-button>
        </el-col>
        <el-col :span="12" style="text-align:right;">
          <el-button
            v-if="props.showMore && (childCount > 5 || (childCount > 4 && props.hasLeftSide && screenWidth < 1920))"
            type="text" @click="showConfirm" :style="store.searchShow ? 'margin-bottom:15px;' : ''"
            @mouseenter="handleMouseenter()" @mouseleave="handleMouseleave()">{{ store.searchShow ?
  '收起查询' : '更多查询' }}
            <el-icon>
              <SvgIcon icon-class="icon_more" :color="color"></SvgIcon>
            </el-icon></el-button>
          <el-button type="text" @click="clear" style="color: #909399;"
            v-if="props.showClear && store.searchShow">清空条件</el-button>
        </el-col>
      </el-row>
    </el-col>
    <!-- 查看更多搜索 -->
  </el-row>
</template>
<script lang="ts" setup>
import { PiniaStore } from '../../store'
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
interface PropsType {
  //   是否需要更多按钮
  showMore?: boolean
  showClear?: boolean
  showSearchBtn?: boolean
  count?: number
  hasLeftSide?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
  showMore: true,
  showClear: false,
  showSearchBtn: true,
  count: 0,
  hasLeftSide: false
})
interface EmitType {
  (e: 'clear'): void
  (e: 'search'): void
}
const emit = defineEmits<EmitType>()
const searchRef = ref<any>(null)
const childRow = ref<any>(null)
const color = ref('#409EFF')
const childCount = ref(1)
const searchHeight = ref('')
const store = PiniaStore()
const showConfirm = () => {
  store.setSearchCount()
  setTimeout(() => {
    const searchHeight = searchRef.value.$el.clientHeight
    store.setSearchHeight(searchHeight)
  }, 300)
}
const screenWidth = ref(0)
// 监听页面窗口大小的变化
watch(
  () => [screenWidth.value, props.count],
  (newValue, oldValue) => {
    setTimeout(() => {
      if (searchRef.value) {
        const searchHeight = searchRef.value.$el.clientHeight
        store.setSearchHeight(searchHeight)
        if (props.count) {
          childCount.value = props.count
        }
      }
    }, 300)
  },
  { deep: true }
)
const clear = () => {
  emit('clear')
}
const searchKey = () => {
  emit('search')
}
const handleMouseenter = () => {
  color.value = '#a0cfff'
}
const handleMouseleave = () => {
  color.value = '#409EFF'
}
onMounted(() => {
  screenWidth.value = document.body.clientWidth
  window.addEventListener("resize", () => {
    screenWidth.value = document.body.clientWidth
  });
  const searchHeight = searchRef.value.$el.clientHeight
  store.setSearchHeight(searchHeight)
  store.setHasLeftSide(props.hasLeftSide)
  childCount.value = searchRef.value.$el.children[0].childNodes[1].childElementCount
})
onUnmounted(() => {
  store.setSearchCount(false)
})
defineExpose({
  searchHeight
})
</script>
<style lang="scss" scoped>
.more-menu-box {
  //   position: absolute;
  //   right: 15px;
  border: var(--el-border);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.more-menu-box:hover {
  background-color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary);

  .el-icon {
    color: var(--el-fill-color-blank);
  }
}

.search-row {
  padding: 7.5px;
  box-sizing: border-box;
  background-color: var(--el-color-white);
  margin: 0 !important;

  .el-col {
    // margin-bottom: 15px;
  }
}

.col-btn-box {
  padding-left: 12px;
}
</style>
